<template>
    <div class="login2">
        <Select ref="selectR" v-if="selectVisible" :fn="selectVisibleFn" />
        <div class="box w">
            <div class="left">
                <div class="header">
                    <div class="menu">
                        <img src="@/assets/menu1.svg" alt="menu" class="menuicon" @click="openDrawer">

                    </div>
                    <div class="searchWrap">
                        <el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false"
                            clearable class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect"
                            :enterkeyhint="'search'">
                            <template #prefix>
                                <img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片"
                                    @click="handleSelect">
                            </template>
                        </el-autocomplete>
                    </div>


                    <img src="@/assets/select.svg" class="first " @click="handleShowCup">


                    <img src="@/assets/home.svg" class="chongzhi" @click="handlehome">

                    <!-- <div class="dropdown">
                        <img src="@/assets/select.svg" class="first " @click="handleShowCup" >
                    </div>

                    <img src="@/assets/home.svg" class="chongzhi" @click="handlehome"> -->
                    <div class="dropdown1 ">
                        <img src="@/assets/setting.svg" @click="handleShowLang" class="second">
                        <Lang class="alert" ref="lang" />
                    </div>
                </div>

                <div class="bigger">
                    <Main v-for="(item, index) in logos" :data="item" :index="index" :key="index"></Main>
                </div>

            </div>
            <div class="right">
                <div class="right-top">
                    <img src="@/assets/calendar.svg" />
                    <h3 class="top-title">{{ $t(i18n.global.t('home.IPOcalendar')) }}</h3>
                </div>
                <div class="right-bottom">

                    <el-calendar ref="calendar" v-model="dayValue">
                        <template #header="{ date }">

                            <el-button size="small" @click="selectDate('prev-month')">
                                <img src="@/assets/arrow-left.svg">
                            </el-button>

                            <span class="month">{{ date }}</span>

                            <el-button size="small" @click="selectDate('next-month')">
                                <img src="@/assets/arrow-right.svg">
                            </el-button>

                        </template>
                        <template #dateCell="{ data }">

                            <p style="margin:0px">
                                {{ data.day.split('-').slice(2).join() * 1 }}
                            <div v-for="(i, index) in dayTime" :key="index">
                                <div v-if="i.split('T')[0].split('-').slice(2).join() * 1 <= 9">

                                    <div v-if="data.day == i.split('T')[0]" class="yuan1"></div>
                                </div>
                                <div v-else>
                                    <div v-if="data.day == i.split('T')[0]" class="yuan"></div>
                                </div>
                            </div>
                            </p>
                        </template>


                    </el-calendar>
                </div>
                <div class="right-bottom1">
                    <Event v-if="Eventdata.length" :data="Eventdata" />
                    <div v-else class="right-bottom-title1">{{ $t(i18n.global.t('home.noevent')) }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'Xlogin',
};
</script>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch, inject, computed, onBeforeMount } from 'vue';
import Lang from "./components/Lang.vue";
import Main from './components/Main.vue';
import { getHomeIpo, getIpo } from '@/api/reqIpo/ipo'
import moment from "moment"
import { useRouter } from 'vue-router';
import i18n from '@/locales'
import { getCurrentInstance, provide } from 'vue'
import Event from './components/Event.vue';
import { getEventData, getSearchListing, getDate } from "@/api/reqIpo/ipo";
import { getDataFromId } from "@/api/mock/home"
import { ElMessage } from 'element-plus'
import SearchCup from "./components/SearchCup.vue";
import Select from "./components/Select.vue";
import { ipoStore } from "@/stores/ipo"
const { proxy } = (getCurrentInstance() as any)
const reflashRouter = inject('reflashRouter') as Function
const handleOnDrwaer = inject('handleOnDrwaer') as Function
const pc = ref(true)
onBeforeMount(() => {
    if (768 >= document.documentElement.clientWidth) {
        pc.value = false
    }
})
const router = useRouter()
const store = ipoStore()
const selectR = ref();
const dayValue = ref(store.homeDay)
const state = ref('')//搜索框数据
//const show = ref(false)
const selectVisible = ref(false)
//const reqeustObj = ref()
onMounted(() => {
    store.setMobileActiveShow(1);//设置移动端弹窗高亮
    // console.log(store.$state.selectedArr);
    window.onhashchange = function () {
        const langHref = window.location.href.split("home")[1]


        if (langHref == '?lang=en') {
            proxy.$i18n.locale = 'en'
            store.setLocale(1)
        } else if (langHref == '?lang=tc') {
            proxy.$i18n.locale = 'zhCt'
            store.setLocale(2)
        } else if (langHref == '?lang=sc') {
            proxy.$i18n.locale = 'zhCn'

            store.setLocale(3)
        }
        reflashRouter()


    };
    getcalendar()

})
const selectVisibleFn = () => {
    selectVisible.value = false
}
//过滤
const selectCards = async (res: any) => {
    async function demo() {
        return new Promise(async (resolve, reject) => {
            try {
                if (!(res as any).data.length) {

                    ElMessage.warning(proxy.$t('home.Norelevantselectdata'))
                    throw ("222")
                }

                const data = (res as any).data.map((item: any) => {
                    let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate, tradeCurrency } = item;
                    return {
                        logolinks: logoLink,
                        title: companyEngFull + ";" + companyChiFull,
                        status: status,
                        number: stkCode,
                        HKD: priceFinal ? priceFinal.toFixed(3) : priceMinMax(),
                        time: listingDate ? listingDate : pricingDate,
                        ipoID: ipoID,
                        price: priceFinal,
                        listingDate: listingDate,
                        tradeCurrency: tradeCurrency
                    }
                    function priceMinMax() {
                        if (priceMin && priceMax) {
                            return `${priceMin.toFixed(3)} - ${priceMax.toFixed(3)}`
                        } else if (priceMin) {
                            return `${priceMin.toFixed(3)} - `
                        } else if (priceMax) {
                            return ` -${priceMax.toFixed(3)}`
                        } else {
                            return " - "
                        }
                    }
                })
                resolve(data)
            } catch (error) {
                reject()
            }

        }
        )
    }
    const result = await demo();
    (result as objType[]).sort((a: any, b: any) => {
        const preTime = new Date(a.number).getTime();
        const nextTime = new Date(b.number).getTime();
        if (preTime == nextTime) {
            return Number(a.number) - Number(b.number);
        } else {
            return preTime - nextTime;
        }
    })
    logos.value = result as objType[]
}
provide('selectCards', selectCards);

const openDrawer = () => {
    console.log(1111)
    handleOnDrwaer(true)
}

const handleSelect = () => {

    if (!state.value) return
    getSearchIpoList(state.value)


}
watch(state, () => {
    store.setKeyWord(state.value)
})
watch(dayValue, async (ne, ol) => {
    const day = moment(ne).format("YYYY-MM-DD")
    store.setHomeDay(day)
    const result = await getEventData(day);
    setEventdata((result as any).data)

})
const Eventdata = ref([
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2370
    // },
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2370
    // }, {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2372
    // },
    // {
    //     listPlatform1:"主板",
    //     name: "力高健康生活有限公司",
    //     logo:"-",
    //     number: 2373
    // },
    // {
    //     listPlatform1:"主板",
    //     name: "力高健康生活有限公司",
    //     logo:"-",
    //     number: 2374
    // },
    // {
    //     listPlatform1:"主板",
    //     name: "力高健康生活有限公司",
    //     logo:"-",
    //     number: 2375
    // },
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2378
    // },
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2374
    // },
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2378
    // },
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司11111111111",
    //     number: 2380
    // }, {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司111111111111111111111111111111",
    //     number: 2381
    // }
])
const setEventdata = (EventD: any) => {
    Eventdata.value = EventD.map((item: any) => {
        const { stkCode, listPlatform, companyEngFull, companyChiFull } = item;
        return {
            logo: '-',
            listPlatform1: listPlatform,
            name: companyEngFull + ";" + companyChiFull,
            number: stkCode
        }

    })
}
const dayTime = ref()
const getcalendar = async () => {
    const res = await getDate()
    dayTime.value = (res as any).data
    console.log(dayTime.value);
}
const getHomeIpoList = async () => {
    async function demo() {
        return new Promise(async (resolve, reject) => {
            // const res = await getHomeIpo()
            const res = await getDataFromId('home');
            const data = (res as any).map((item: any) => {
                // const data = (res as any).data.map((item: any) => {
                let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate, tradeCurrency } = item;
                //  ? priceFinal.toFixed(3) : priceMinMax()

                return {
                    logolinks: logoLink,
                    title: companyEngFull + ";" + companyChiFull,
                    status: status,
                    number: stkCode,
                    HKD: priceFinal ? priceFinal.toFixed(3) : priceMinMax(),
                    time: listingDate ? listingDate : pricingDate,
                    ipoID: ipoID,
                    price: priceFinal,
                    listingDate: listingDate,
                    tradeCurrency: tradeCurrency
                }
                function priceMinMax() {
                    if (priceMin && priceMax) {
                        return `${priceMin?.toFixed(3)} - ${priceMax.toFixed(3)}`
                    } else if (priceMin) {
                        return `${priceMin?.toFixed(3)} - `
                    } else if (priceMax) {
                        return ` -${priceMax?.toFixed(3)}`
                    } else {
                        return " - "
                    }
                }
            })
            resolve(data)
        }
        )
    }
    const result = await demo();
    (result as objType[]).sort((a: any, b: any) => {
        const preTime = new Date(a.time).getTime();
        const nextTime = new Date(b.time).getTime();
        if (preTime == nextTime) {
            return Number(a.number) - Number(b.number);
        } else {
            return preTime - nextTime;
        }
    })
    logos.value = result as objType[]
}
provide('getHomeIpoList', getHomeIpoList);
const handlehome = () => {
    getHomeIpoList();

}
onMounted(async () => {
    getHomeIpoList();
    // var day = moment(Date.now()).format("YYYY-MM-DD")
    var day = moment(store.homeDay).format("YYYY-MM-DD")
    const result = await getEventData(day);
    setEventdata((result as any).data)
})
const getSearchIpoList = async (keyword: string) => {

    async function demo() {
        return new Promise(async (resolve, reject) => {
            try {
                // const res = await getSearchListing(keyword)
                // console.log(keyword,state.value);

                store.setKeyWord(keyword)
                const res = await store.getSearchSelectList()


                if ((res as any).data.length == 0) {
                    ElMessage.warning(proxy.$t('home.Norelevantselectdata'))
                    throw ("222")
                }
                const data = (res as any).data.map((item: any) => {
                    let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate, tradeCurrency } = item;
                    // console.log(companyEngFull,companyChiFull);
                    return {
                        logolinks: logoLink,
                        title: companyEngFull + ";" + companyChiFull,
                        status: status,
                        number: stkCode,
                        HKD: priceFinal ? priceFinal.toFixed(3) : priceMinMax(),
                        time: listingDate ? listingDate : pricingDate,
                        ipoID: ipoID,
                        price: priceFinal,
                        listingDate: listingDate,
                        tradeCurrency: tradeCurrency
                    }
                    function priceMinMax() {
                        if (priceMin && priceMax) {
                            return `${priceMin.toFixed(3)} - ${priceMax.toFixed(3)}`
                        } else if (priceMin) {
                            return `${priceMin.toFixed(3)} - `
                        } else if (priceMax) {
                            return ` -${priceMax.toFixed(3)}`
                        } else {
                            return " - "
                        }
                    }
                })
                resolve(data)
            } catch (error) {
                reject()
            }

        }
        )
    }
    const result = await demo();
    (result as objType[]).sort((a: any, b: any) => {
        const preTime = new Date(a.number).getTime();
        const nextTime = new Date(b.number).getTime();
        if (preTime == nextTime) {
            return Number(a.number) - Number(b.number);
        } else {
            return preTime - nextTime;
        }
    })

    logos.value = result as objType[]

}
//测试功能----------------------------------------------------------
onMounted(async () => {
    // const result=await getDataFromId("home");
    // console.log('@@',result);
    // 测试event
    // const result = await getDataFromId(101);
    // setEventdata(result);
})
interface objType {
    HKD: string,
    number: string,
    price: string,
    time: string,
    title: string,
    trading: string,
    logolinks: string,
    status: string,
    listingDate: string,
    ipoID: number,
    tradeCurrency: string
}
const logos = ref<objType[]>([
    // {
    //     title: "bestCompany",
    //     number: "09985",
    //     HKD: "HKD 148.000",
    //     price: "final offer Price",
    //     time: "2023-03-31 09:00",
    //     trading: "Commencement of trading date"
    // },

])

const jsonData = {
    "code": null,
    "msg": null,
    "data": {
        "exception": null,
        "nextCursor": "11",
        "exceptionStr": "[]",
        "dataStr": "[IPOList.DataIn(ipoID=1234, stkCode=9988, isin=KYG017191142, status=25), IPOList.DataIn(ipoID=1235, stkCode=9633, isin=CNE100004272, status=30), IPOList.DataIn(ipoID=1236, stkCode=9618, isin=KYG8208B1014, status=45), IPOList.DataIn(ipoID=1237, stkCode=6618, isin=KYG5074A1004, status=60), IPOList.DataIn(ipoID=1238, stkCode=1024, isin=KYG532631028, status=70)]",
        "code": "0",
        "totalSize": 5,
        "data": null,
        "id": 1635457757501956097,
        "message": "",
        "timestamp": null
    }
}
// console.log(jsonData);
// console.log(jsonData.data.dataStr.);

interface LinkItem {
    value: string
    link: string
}


const links = ref<LinkItem[]>([])
//搜索框组件自带js
const querySearch = (queryString: string, cb: (arg0: { value: string; link: string; }[]) => void) => {
    // console.log('search', queryString, value, link, cb)
    const results = queryString
        ? links.value.filter(createFilter(queryString))
        : links.value
    // call callback function to return suggestion objects
    const result11 = cb(results)
}
const createFilter = (queryString: string) => {
    return (restaurant: { value: string; }) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}
//测试12313123
//搜索提示框信息
const loadAll = () => {
    return [
        { value: '北京', link: 'https://github.com/babel/babel' },
        { value: '淮北', link: 'https://github.com/babel/babel' },
    ]
}

onMounted(() => {
    links.value = loadAll()

})//自动搜索框自带js结束

const calendar = ref()
const selectDate = (val: string) => {
    //  console.log(val)
    calendar.value.selectDate(val)
}//日历自带js结束

//通过ref获取子组件实例，语言转换功能js
const lang = ref()
const SearchCupDom = ref()

const handleShowLang = (e: any) => {
    e.stopPropagation()
    // console.log(111)
    // selectR.value.showSelect = false
    lang.value.showLang = !lang.value.showLang
    selectVisible.value = false
}
const handleShowCup = (e: any) => {
    e.stopPropagation()
    lang.value.showLang = false;
    //console.log(111)
    selectVisible.value = !selectVisible.value
}
//路由传参
// const handleclick = (item: any) => {
//     localStorage.setItem('ipoID', item.number)
//     localStorage.setItem('itemData', JSON.stringify(item))
//     router.push({
//         name: 'Xdashboard',
//         params: { data: JSON.stringify(item) }
//     },
//     )

// }

onMounted(() => {
    //  console.log('onMounted111111')
    document.documentElement.onclick = function () {
        // console.log('documentElement11111')
        store.setMainExpand(-1);
        selectVisible.value = false
        lang.value.showLang = false;
        // console.log('documentElement2222')


    }
    if (lang.value.showLang) {
        lang.value.showLang = false
    }
}
)
onUnmounted(() => {
    document.documentElement.onclick = null
})

</script>
<style lang="scss" scoped>
.yuan {
    width: 12px;
    height: 12px;
    background-color: #f7be39;
    position: absolute;
    //right: 20px;
    //top: 36px;
    transform: translateY(11px);
    //transform: translateX(3px);
    margin-left: 2px;
    border-radius: 10px;
}

.yuan1 {
    width: 12px;
    height: 12px;
    background-color: #f7be39;
    position: absolute;
    border-radius: 10px;
    transform: translateY(11px);
    margin-left: -2px;
}

.login2 {
    background-image: url("@/assets/1x/beijingtu.png");
    position: fixed;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    font-family: "Calibri";
    overflow: hidden;

    @media screen and (max-width: 768px) {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-y: hidden;
    }
}

.box {
    display: flex;
    justify-content: space-between;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    @media screen and (max-width: 768px) {
        width: 100vw;
        overflow-x: hidden;
    }
}

.left {

    width: 70%;

    .header {
        display: flex;
        align-items: center;
        // padding-left: 35px;
        height: 80px;

        //position: fixed;
        //background-color: red;
        @media screen and (max-width: 768px) {
            //             position: fixed;
            //             top: 0;
            //   left: 0;
            //   width: 100%;
            // background-color: #000000;
            position: relative;

        }

        .menuicon {
            display: none;
        }



        .my-autocomplete li {
            line-height: normal;
            padding: 7px;
        }

        .my-autocomplete li .name {
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .my-autocomplete li .addr {
            font-size: 12px;
            color: #b4b4b4;
        }

        .my-autocomplete li .highlighted .addr {
            color: #ddd;
        }



        .dropdown1 {
            position: relative;

            .alert {
                position: absolute;
                top: 70px;
                left: -50px;
            }

            .searchCup {
                position: absolute;
                top: 70px;
                left: -50px;
            }
        }

        .first {
            //  width: 32px;
            //  height: 36px;
            margin-top: 25px;
            margin-left: 25px;
            cursor: pointer;



        }

        .second {
            //  width: 32px;
            //  height: 36px;
            margin-top: 25px;
            margin-left: 5px;
            margin-right: 10px;
            cursor: pointer;


        }

        .chongzhi {
            //  width: 32px;
            height: 35px;
            margin-top: 21px;
            margin-left: 10px;
            margin-right: 10px;
            cursor: pointer;

            @media screen and (max-width: 768px) {
                // width: 24px;
                height: 26px;
                //margin-top: 7px;
                margin-left: 10px;
                margin-top: 0px;
            }
        }
    }
}

.bigger {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    height: 90vh;
    overflow-y: scroll;
    margin-left: -40px;

    // margin-left: 120px;
    // width: 1250px;

    @media screen and (max-width: 768px) {
        width: 100vw;
        justify-content: center;
        overflow-y: scroll;
        height: 85vh;

    }

}

.right {
    @media screen and (max-width: 768px) {
        display: none;
    }

    box-sizing: border-box;
    // width: 900px;
    // height: 100vh;
    height: 100vh;
    padding-bottom: 80px;
    background-color: #1f4055;
    padding-left: 40px;
    padding-right: 40px;
    z-index: 1;
    // float: right;

    .right-top {
        display: flex;
        // margin-left: 40px;
        margin-top: 20px;
        transform: translateY(10px);

        .top-title {
            text-align: center;
            display: inline-block;
            font-size: 38px;
            color: #ffffff;
            margin-left: 10px;
        }
    }

    .right-bottom {
        width: 420px;
        background-color: #ffffff;
        height: fit-content;
        margin-top: 40px;
        // margin-left: 20px;

        .month {
            font-size: 25px;
            color: #000000;
            font-weight: bold;
            text-align: center;
        }

    }

    .right-bottom1 {
        width: 420px;
        background-color: #ffffff;
        // height: 350px;
        height: 350px;
        //height: fit-content;
        margin-top: 40px;
        // position: relative;
        // margin-left: 20px;
        // text-align: center;
        // line-height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;


        .right-bottom-title1 {

            color: #1C3F56;
            font-size: 22px;
            align-items: center;
            font-weight: 700;

        }

        li {
            color: #000000
        }
    }

}

:deep(.el-calendar-table) {
    width: 380px;
    // transform: translateX(-20px);
    // margin-top: 20px;
}

:deep(.el-button--small) {
    border: none;
    background-color: #fff;
}

:deep(.el-calendar__body) {
    background-color: #e8ebee;
    height: fit-content;
    padding: 12px 20px 18px;
}

:deep(.el-calendar__header) {
    align-items: center;
}

:deep(.el-calendar) {
    width: 420px;
    font-family: "Calibri"
}

:deep(.el-input) {
    width: calc(100vw / var(--screen) * 750);

    @media screen and (max-width: 768px) {
        width: fit-content;
        height: fit-content;
        // background-color: red;
        margin-left: 10rem;
        padding: 0;
        // width: 50vw;
        // display: flex;
    }

}

:deep(.el-calendar-table td) {
    border: none;
    text-align: center;
    font-weight: 800;
}

:deep(.el-calendar-table thead th) {
    //padding: 2px;
    font-weight: 550px;
}

:deep(.el-calendar .el-calendar-table .el-calendar-day) {
    padding: 0px;
    text-align: center;
    line-height: 33px;
    font: 13px 'Poppins-Regular';
    background-color: rgb(255, 255, 255);
    height: 33px;
    border: none;
    margin-top: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    // font-family: "Calibri"
}

:deep(.el-calendar-table thead) {
    //margin-top: 20px;
    font-size: 16px;
    font-weight: bold;
    background-color: rgb(255, 255, 255);
    border: none;
    font-family: "Calibri"
}

:deep(.el-calendar-table td.is-selected) {
    background-color: #e8ebee;
}

:deep(.el-calendar-table td.is-today .el-calendar-day) {
    color: black;
    background-color: #e36466;
}

:deep(.el-calendar-table td.is-selected .el-calendar-day) {
    // background-color: #e36466;
    border: 3px solid #e36466;
}

:deep(.el-calendar-table td.is-selected .el-calendar-day span) {
    color: black;
}



:deep(.is-selected) {
    color: red;
}

@media screen and (max-width: 768px) {
    .left {
        width: 100vw;

        * {
            margin: 0;
            padding: 0;
        }

        .header {
            height: 60px;
            display: flex;
            justify-content: center;
            //    background-color: red;
            align-items: center;

            .menuicon {
                display: block;
                margin-left: 9px;
                width: 24px;
                height: 19px;
            }

            .menu {

                img {
                    width: 24px;
                    height: 19px;

                }


            }

            .dropdown1 {
                display: none;
            }

            .first {
                //  width: 22px;
                height: 26px;
                //  margin-top: 14px;
                margin-left: 1px;
                margin-top: 0px;
            }
        }

    }

    // :deep(.el-drawer__body){
    //     background-color: red;
    //     width: 80vw;
    // }
    // :deep(.el-overlay){
    //     background-color: green;
    // }

}
</style>
<style>
/* ::-webkit-scrollbar {
     width: 0 !important;
   }
   ::-webkit-scrollbar {
     width: 0 !important;height: 0;
   } */
@media (min-width: 992px) {
    .header .el-input__wrapper {
        margin-top: 20px;
        margin-left: 20px;
        padding-left: 50px;
        width: 50vw;
        height: 50px;
        border-radius: 25px;
        font-size: 25px;
        border: none;
        outline: none;


    }

    .el-input__prefix-inner {
        transform: translateX(-35px);
    }
}

.searchWrap {
    margin-left: -50px;

}

@media screen and (max-width: 768px) {
    .searchWrap {
        margin-left: 0px;
    }


    .el-input {
        margin: 10px !important;
    }


    .el-input__prefix-inner {
        transform: translateX(-35px);
    }

    .header .searchWrap1 .el-input__wrapper {
        margin-top: 0 !important;
        margin-left: -10px !important;
        padding-left: 50px;
        width: 61vw;
        height: 30px;
        border-radius: 25px;
        font-size: 16px;
        border: none;
        outline: none;


    }

    .header .el-input__wrapper {
        margin-top: 0 !important;
        padding-left: 50px;
        width: 50vw;
        height: 30px;
        border-radius: 25px;
        font-size: 16px;
        border: none;
        outline: none;

    }


    .el-input__inner {
        margin: -35px;
        padding: 0;
    }

    .imgSearch123 {
        width: 15px;
        height: 15px;
        transform: translateX(-7px);
    }
}
</style>
